<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历练习</title>
</head>
<body>
<table border="1px">
    <caption>个人简介</caption>
    <tr>
        <td>照片:</td>
        <td id="pic_td"></td>
    </tr>
    <tr>
        <td>姓名:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friends_td"></td>
    </tr>
</table>
<script>
    let person={
        name:'范传奇',
        age:18,
        friends:['小明','小红','小刚'],
        imgUrl:"img/fcq.jpg"
    };
    //根据id依次获取四个单元素表格
    let picTd=document.getElementById('pic_td');
    let nameTd=document.getElementById('name_td');
    let ageTd=document.getElementById('age_td');
    let friendsTd=document.getElementById('friends_td');
    //将对象的指定属性值装入单元表格中
    nameTd.innerHTML=person.name;
    ageTd.innerHTML=person.age;
    //需要创建一个图片对象
    let imgE=document.createElement('img');
    imgE.src=person.imgUrl;
    imgE.width=100;
    //注意：需要把图片元素放入到对应的表格单中，不用innerHTML插入
    picTd.append(imgE);
    //页面没有无序列表，需要创建
    let ulE = document.createElement('ul');
    //遍历好友数组,有几位好友,ul中就有几个li
    for(let i=0;i<person.friends.length;i++){
        let liE = document.createElement('li');
        liE.innerHTML = person.friends[i];
        ulE.append(liE);
    }
    friendsTd.append(ulE);
</script>
</body>
</html>